Brauserilaiendite taustaskriptid: üleminek JavaScripti Service Workeritele

Brauserilaiendite arendusmaastik on pidevas muutumises. Üks olulisemaid hiljutisi muudatusi on üleminek traditsioonilistelt püsivatelt taustalehtedelt JavaScripti Service Workeritele taustaskriptide jaoks. See migratsioon, mis on suuresti tingitud Manifest V3-st (MV3) Chromiumi-põhistes brauserites, toob kaasa arvukalt eeliseid, kuid esitab arendajatele ka ainulaadseid väljakutseid. See põhjalik juhend süveneb selle muudatuse põhjustesse, eelistesse ja puudustesse ning pakub üksikasjalikku ülevaadet migratsiooniprotsessist, tagades teie laiendile sujuva ülemineku.

Miks minna üle Service Workeritele?

Selle ülemineku peamine motivatsioon on parandada brauseri jõudlust ja turvalisust. Püsivad taustalehed, mis olid levinud Manifest V2-s (MV2), võivad tarbida märkimisväärseid ressursse isegi jõudeolekus, mõjutades aku kestvust ja brauseri üldist reageerimisvõimet. Service Workerid seevastu on sündmuspõhised ja aktiivsed ainult siis, kui neid vajatakse.

Service Workerite eelised:

• Parem jõudlus: Service Workerid on aktiivsed ainult siis, kui sündmus neid käivitab, näiteks API-kutse või teade laiendi teisest osast. See "sündmuspõhine" olemus vähendab ressursikulu ja parandab brauseri jõudlust.
• Täiustatud turvalisus: Service Workerid töötavad piiratud keskkonnas, vähendades ründepinda ja parandades laiendi üldist turvalisust.
• Tulevikukindlus: Enamik suuremaid brausereid liigub Service Workerite kui laiendite taustatöötluse standardi suunas. Nüüd migreerimine tagab, et teie laiendus jääb ühilduvaks ja väldib tulevasi vananemisprobleeme.
• Mitteblokeerivad toimingud: Service Workerid on loodud ülesannete täitmiseks taustal, ilma et see blokeeriks peamist lõime, tagades sujuvama kasutajakogemuse.

Puudused ja väljakutsed:

• Õppimiskõver: Service Workerid tutvustavad uut programmeerimismudelit, mis võib olla väljakutseks arendajatele, kes on harjunud püsivate taustalehtedega. Sündmuspõhine olemus nõuab teistsugust lähenemist oleku haldamisele ja suhtlusele.
• Püsiva oleku haldamine: Püsiva oleku säilitamine Service Workeri aktiveerimiste vahel nõuab hoolikat kaalumist. Tehnikad nagu Storage API või IndexedDB muutuvad ülioluliseks.
• Silumise keerukus: Service Workerite silumine võib olla keerulisem kui traditsiooniliste taustalehtede silumine nende vahelduva olemuse tõttu.
• Piiratud juurdepääs DOM-ile: Service Workerid ei saa otse DOM-ile juurde pääseda. Nad peavad veebilehtedega suhtlemiseks suhtlema sisuskriptidega.

Põhimõistete mõistmine

Enne migratsiooniprotsessi sukeldumist on oluline mõista Service Workerite taga olevaid põhimõisteid:

Elutsükli haldamine

Service Workeritel on selge elutsükkel, mis koosneb järgmistest etappidest:

• Installimine: Service Worker installitakse, kui laiendus esmakordselt laaditakse või värskendatakse. See on ideaalne aeg staatiliste varade vahemällu salvestamiseks ja esialgsete seadistustoimingute tegemiseks.
• Aktiveerimine: Pärast installimist aktiveeritakse Service Worker. See on hetk, kus see saab hakata sündmusi käsitlema.
• Jõudeolek: Service Worker jääb jõudeolekusse, oodates sündmusi, mis selle käivitaksid.
• Lõpetamine: Service Worker lõpetatakse, kui seda enam ei vajata.

Sündmuspõhine arhitektuur

Service Workerid on sündmuspõhised, mis tähendab, et nad käivitavad koodi ainult vastusena konkreetsetele sündmustele. Levinud sündmused on järgmised:

• install: Käivitatakse, kui Service Worker on installitud.
• activate: Käivitatakse, kui Service Worker on aktiveeritud.
• fetch: Käivitatakse, kui brauser teeb võrgupäringu.
• message: Käivitatakse, kui Service Worker saab teate laiendi teisest osast.

Protsessidevaheline suhtlus

Service Workeritel peab olema viis suhelda teiste laiendi osadega, näiteks sisuskriptide ja hüpikakna skriptidega. Tavaliselt saavutatakse see chrome.runtime.sendMessage ja chrome.runtime.onMessage API-de abil.

Samm-sammuline migratsioonijuhend

Vaatame läbi tüüpilise brauserilaiendi migreerimise protsessi püsivalt taustalehelt Service Workerile.

1. samm: värskendage oma manifestifaili (manifest.json)

Esimene samm on värskendada oma manifest.json faili, et kajastada üleminekut Service Workerile. Eemaldage väli "background" ja asendage see väljaga "background", mis sisaldab omadust "service_worker".

Näide Manifest V2-st (püsiv taustaleht):

{
  "manifest_version": 2,
  "name": "Minu Laiendus",
  "version": "1.0",
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "permissions": [
    "storage",
    "activeTab"
  ]
}

Näide Manifest V3-st (Service Worker):

{
  "manifest_version": 3,
  "name": "Minu Laiendus",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "storage",
    "activeTab"
  ]
}

Olulised kaalutlused:

• Veenduge, et teie manifest_version on seatud väärtusele 3.
• Omadus "service_worker" määrab tee teie Service Workeri skripti juurde.

2. samm: refaktoreerige oma taustaskript (background.js)

See on migratsiooniprotsessi kõige olulisem samm. Peate oma taustaskripti refaktoreerima, et kohaneda Service Workerite sündmuspõhise olemusega.

1. Eemaldage püsivad olekumuutujad

MV2 taustalehtedel võisite toetuda globaalsetele muutujatele oleku säilitamiseks erinevate sündmuste vahel. Kuid Service Workerid lõpetatakse jõudeolekus, seega pole globaalsed muutujad püsiva oleku jaoks usaldusväärsed.

Näide (MV2):

var counter = 0;

chrome.browserAction.onClicked.addListener(function(tab) {
  counter++;
  console.log("Loendur: " + counter);
});

Lahendus: kasutage Storage API-d või IndexedDB-d

Storage API (chrome.storage.local või chrome.storage.sync) võimaldab teil andmeid püsivalt salvestada ja hankida. IndexedDB on teine võimalus keerukamate andmestruktuuride jaoks.

Näide (MV3 Storage API-ga):

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.storage.local.get(['counter'], function(result) {
    var counter = result.counter || 0;
    counter++;
    chrome.storage.local.set({counter: counter}, function() {
      console.log("Loendur: " + counter);
    });
  });
});

Näide (MV3 IndexedDB-ga):

// Funktsioon IndexedDB andmebaasi avamiseks
function openDatabase() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('myDatabase', 1);

    request.onerror = (event) => {
      reject('Andmebaasi avamise viga');
    };

    request.onsuccess = (event) => {
      resolve(event.target.result);
    };

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      db.createObjectStore('myObjectStore', { keyPath: 'id' });
    };
  });
}

// Funktsioon andmete hankimiseks IndexedDB-st
function getData(db, id) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['myObjectStore'], 'readonly');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.get(id);

    request.onerror = (event) => {
      reject('Andmete hankimise viga');
    };

    request.onsuccess = (event) => {
      resolve(request.result);
    };
  });
}

// Funktsioon andmete sisestamiseks IndexedDB-sse
function putData(db, data) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['myObjectStore'], 'readwrite');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.put(data);

    request.onerror = (event) => {
      reject('Andmete sisestamise viga');
    };

    request.onsuccess = (event) => {
      resolve();
    };
  });
}

chrome.browserAction.onClicked.addListener(async (tab) => {
  try {
    const db = await openDatabase();
    let counterData = await getData(db, 'counter');
    let counter = counterData ? counterData.value : 0;

    counter++;

    await putData(db, { id: 'counter', value: counter });
    db.close();
    console.log("Loendur: " + counter);

  } catch (error) {
    console.error("IndexedDB viga: ", error);
  }
});

2. Asendage sündmuste kuulajad sõnumite edastamisega

Kui teie taustaskript suhtleb sisuskriptide või teiste laiendi osadega, peate kasutama sõnumite edastamist.

Näide (sõnumi saatmine taustaskriptist sisuskripti):

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.message === "get_data") {
      // Tehke midagi andmete hankimiseks
      let data = "Näidisandmed";
      sendResponse({data: data});
    }
  }
);

Näide (sõnumi saatmine sisuskriptist taustaskripti):

chrome.runtime.sendMessage({message: "get_data"}, function(response) {
  console.log("Vastuvõetud andmed: " + response.data);
});

3. Käsitlege lähtestamistoiminguid sündmuses `install`

Sündmus install käivitatakse, kui Service Worker esmakordselt installitakse või värskendatakse. See on ideaalne koht lähtestamistoimingute tegemiseks, näiteks andmebaaside loomiseks või staatiliste varade vahemällu salvestamiseks.

Näide:

chrome.runtime.onInstalled.addListener(function() {
  console.log("Service Worker on installitud.");
  // Tehke siin lähtestamistoiminguid
  chrome.storage.local.set({initialized: true});
});

4. Kaaluge Offscreen-dokumente

Manifest V3 tutvustas offscreen-dokumente, et käsitleda ülesandeid, mis varem nõudsid DOM-ile juurdepääsu taustalehtedel, näiteks heli taasesitus või lõikelauaga suhtlemine. Need dokumendid töötavad eraldi kontekstis, kuid saavad service workeri nimel DOM-iga suhelda.

Kui teie laiendus peab DOM-i ulatuslikult manipuleerima või tegema ülesandeid, mida ei ole sõnumite edastamise ja sisuskriptidega lihtne saavutada, võivad offscreen-dokumendid olla õige lahendus.

Näide (Offscreen-dokumendi loomine):

// Teie taustaskriptis:
async function createOffscreen() {
  if (await chrome.offscreen.hasDocument({
    reasons: [chrome.offscreen.Reason.WORKER],
    justification: 'põhjus, miks dokumenti vaja on'
  })) {
    return;
  }
  await chrome.offscreen.createDocument({
    url: 'offscreen.html',
    reasons: [chrome.offscreen.Reason.WORKER],
    justification: 'põhjus, miks dokumenti vaja on'
  });
}

chrome.runtime.onStartup.addListener(createOffscreen);
chrome.runtime.onInstalled.addListener(createOffscreen);

Näide (offscreen.html):

Näide (offscreen.js, mis töötab offscreen-dokumendis):

// Kuulake sõnumeid service workerilt
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'doSomething') {
    // Tehke siin midagi DOM-iga
    document.body.textContent = 'Toiming sooritatud!';
    sendResponse({ result: 'success' });
  }
});

3. samm: testige oma laiendit põhjalikult

Pärast taustaskripti refaktoreerimist on ülioluline oma laiendit põhjalikult testida, et veenduda selle korrektses toimimises uues Service Workeri keskkonnas. Pöörake erilist tähelepanu järgmistele valdkondadele:

• Oleku haldamine: Veenduge, et teie püsivat olekut salvestatakse ja hangitakse korrektselt Storage API või IndexedDB abil.
• Sõnumite edastamine: Veenduge, et sõnumeid saadetakse ja võetakse vastu korrektselt taustaskripti, sisuskriptide ja hüpikakna skriptide vahel.
• Sündmuste käsitlemine: Testige kõiki sündmuste kuulajaid, et veenduda nende ootuspärases käivitumises.
• Jõudlus: Jälgige oma laiendi jõudlust, et veenduda, et see ei tarbi liigseid ressursse.

4. samm: Service Workerite silumine

Service Workerite silumine võib olla keeruline nende vahelduva olemuse tõttu. Siin on mõned näpunäited, mis aitavad teil oma Service Workerit siluda:

• Chrome DevTools: Kasutage Chrome DevTools'i Service Workeri kontrollimiseks, konsoolilogide vaatamiseks ja peatuspunktide seadmiseks. Leiate Service Workeri vahekaardilt "Application".
• Püsivad konsoolilogid: Kasutage ohtralt console.log lauseid oma Service Workeri täitmise voo jälgimiseks.
• Peatuspunktid: Seadke oma Service Workeri koodis peatuspunkte, et peatada täitmine ja kontrollida muutujaid.
• Service Workeri inspektor: Kasutage Chrome DevTools'i Service Workeri inspektorit, et vaadata Service Workeri olekut, sündmusi ja võrgupäringuid.

Parimad praktikad Service Workerile migreerimiseks

Siin on mõned parimad praktikad, mida järgida oma brauserilaiendi migreerimisel Service Workeritele:

• Alustage varakult: Ärge oodake viimase hetkeni, et migreerida Service Workeritele. Alustage migratsiooniprotsessi niipea kui võimalik, et anda endale piisavalt aega koodi refaktoreerimiseks ja laiendi testimiseks.
• Jaotage ülesanne osadeks: Jaotage migratsiooniprotsess väiksemateks, hallatavateks ülesanneteks. See muudab protsessi vähem heidutavaks ja lihtsamini jälgitavaks.
• Testige sageli: Testige oma laiendit sageli kogu migratsiooniprotsessi vältel, et varakult vigu leida.
• Kasutage püsiva oleku jaoks Storage API-d või IndexedDB-d: Ärge toetuge püsiva oleku jaoks globaalsetele muutujatele. Kasutage selle asemel Storage API-d või IndexedDB-d.
• Kasutage suhtluseks sõnumite edastamist: Kasutage sõnumite edastamist taustaskripti, sisuskriptide ja hüpikakna skriptide vaheliseks suhtluseks.
• Optimeerige oma koodi: Optimeerige oma koodi jõudluse parandamiseks, et minimeerida ressursikulu.
• Kaaluge Offscreen-dokumente: Kui peate DOM-i ulatuslikult manipuleerima, kaaluge offscreen-dokumentide kasutamist.

Rahvusvahelistumise kaalutlused

Globaalsele publikule brauserilaiendite arendamisel on ülioluline arvestada rahvusvahelistumise (i18n) ja lokaliseerimisega (l10n). Siin on mõned näpunäited, kuidas tagada, et teie laiendus oleks kättesaadav kasutajatele üle maailma:

• Kasutage kausta `_locales`: Salvestage oma laiendi tõlgitud stringid kausta `_locales`. See kaust sisaldab alamkaustu iga toetatud keele jaoks koos failiga `messages.json`, mis sisaldab tõlkeid.
• Kasutage süntaksit `__MSG_messageName__`: Kasutage süntaksit `__MSG_messageName__`, et viidata oma tõlgitud stringidele oma koodis ja manifestifailis.
• Toetage paremalt vasakule (RTL) keeli: Veenduge, et teie laiendi paigutus ja stiil kohanduksid korrektselt RTL-keeltega, nagu araabia ja heebrea keel.
• Arvestage kuupäeva ja kellaaja vormindamisega: Kasutage iga lokaadi jaoks sobivat kuupäeva ja kellaaja vormingut.
• Pakkuge kultuuriliselt asjakohast sisu: Kohandage oma laiendi sisu, et see oleks kultuuriliselt asjakohane erinevatele piirkondadele.

Näide (_locales/et/messages.json):

{
  "extensionName": {
    "message": "Minu Laiendus",
    "description": "Laienduse nimi"
  },
  "buttonText": {
    "message": "Kliki siia",
    "description": "Nupu tekst"
  }
}

Näide (tõlgitud stringidele viitamine oma koodis):

document.getElementById('myButton').textContent = chrome.i18n.getMessage("buttonText");

Kokkuvõte

Brauserilaiendi taustaskripti migreerimine JavaScripti Service Workerile on oluline samm jõudluse, turvalisuse parandamise ja laiendi tulevikukindluse tagamise suunas. Kuigi üleminek võib esitada mõningaid väljakutseid, on kasu vaeva väärt. Järgides selles juhendis toodud samme ja võttes omaks parimad praktikad, saate tagada sujuva ja eduka migratsiooni, pakkudes paremat kogemust oma kasutajatele üle maailma. Ärge unustage põhjalikult testida ja kohaneda uue sündmuspõhise arhitektuuriga, et täielikult ära kasutada Service Workerite võimsust.

Lisamaterjalid

• Chrome'i laienduse Manifest V3 dokumentatsioon
• Mozilla Service Worker API dokumentatsioon
• Service Workeri põhitõed